<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>未来头条-发布文章</title>
    <link rel="icon" href="../static/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png" th:href="@{/img/default_avatar/2e6ced4da4ff5a32c7f1866bff276450.png}" type="image/png">
    <link rel="stylesheet" href="../static/css/postEssay/postEssay.css" th:href="@{/css/postEssay/postEssay.css}">
    <link rel="stylesheet" href="../static/iconFont/iconfont.css" th:href="@{/iconFont/iconfont.css}">
</head>
<body>
<span class="message" id="alert"  style="color: red; display: none;">></span>
<header>
    <nav>
        <div>
            <i class="iconfont icon-fanhui"></i>
            <span class="publish-article">发布文章</span>
        </div>

        <div class="nav-right">
            <a href="#" class="article-norms">头条号发文规范</a>
            <i class=" iconfont icon-messages"></i>
            <!-- <span class="notification-count">2</span> -->
            <span class="notification-text">消息</span>
            <!-- <img src="avatar.png" alt="头像" class="avatar"> -->

        </div>
    </nav>
</header>
<main>
    
    <div class="editor-container">
        <div class="editor-toolbar">

            <div class="insertImage">
                <input type="file" id="imageInput" accept="image/*" style="display: none">
                <i class="iconfont icon-tupian" id="addImageBtn"></i>
<!--                <div class="text insertImage-text ">插入图片</div>-->
            </div>
        </div>
        <div class="titleInput">
            <input type="text" placeholder="请输入文章标题（2~30 个字）" id="title" class="article-title" minlength="2" maxlength="30" required>
            <span class="title-length-info">还需输入 2 个字</span>
        </div>

        <div class="article-content" id="content" contenteditable="true">
            <p class="placeholder">请输入正文</p>
        </div>
        <div class="article-word-count">共 0 字</div>
        <div class="imagePreview">
            <div class="imagePreview-text">添加文章封面</div>
            <div class="image-upload-box">
                <input type="file" id="imageUpload" accept="image/jpeg, image/png">
                <div class="img-placeholder">
                    <i class=" iconfont icon-add"></i>
                </div>
            </div>
        </div>
<!--        <div class="article-settings">-->
<!--            <input type="checkbox" id="isDraft" value="1">-->
<!--            <span style="margin-left:8px">保存草稿箱</span>-->
<!--        </div>-->

        <div class="Essay-classify">
            <div class="Essay-classify-title">选择文章类型
                <div class="mouseHover-help">
                    <div class="Essay-classify-contents">
                        <p class="finance category-item" data-category="finance" id="3">财经</p>
                        <p class="technology category-item" data-category="technology" id="4">科技</p>
                        <p class="hot category-item" data-category="hot" id="5">热点</p>
                        <p class="military category-item" data-category="military" id="6">军事</p>
                        <p class="sports category-item" data-category="sports" id="7">体育</p>
                    </div>
                </div>

            </div>
            <span class="tag-line" id="tagLine">_________</span>


        </div>
        <div class="VIP">
            <input type="checkbox" id="isMemberOnly" value="1">该文章仅会员可见
        </div>
        <span class="Temporarily-save-to-drafts">暂存草稿箱</span>
        <span class="post" id="publishBtn">预览并发布</span>
    </div>
</main>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../static/js/postEssay.js" th:src="@{/js/postEssay.js}"></script>
</body>
</html>